<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加项目</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/area.js"></script>
    <style>
        .content{}
        .content ul{}
        .content ul li{position: relative;line-height: 30px;padding: 10px;overflow: hidden;}
        .content ul li .left{float: left;color: #FFC10C;width: 25%;box-sizing: border-box;border-right: 1px solid #ededed;}
        .content ul li .left span{display: block;width: 100%;text-align: justify;}
        .content ul li .right{float: right;color: #333;width: 75%;position: relative;}
        .content ul li .choose{position: relative;}
        .content ul li .choose select{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .choose span{float: right;color: #666;}
        .content ul .price{overflow: hidden;padding-left: 10px;}
        .content ul .price label{float: left;width: 60%;}
        .content ul .price span{float: right;width: 40%;text-align: right;}
        .content ul li .right .sex{padding-left: 3%;}
        .content ul li .right .sex span{display: inline-block;background-color: #EFEFEF;width: 30%;
            text-align: center;font-size: 14px;line-height: 24px;}
        .content ul li .time input{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .time span{float: right;color: #666;}
        .content ul li .right .area{padding-left: 3%;}
        .content ul li .right .area select{width: 30%;font-size: 13px;line-height: 24px;border: none;background-color: #EFEFEF;}

        .footer{height: 50px;}
        .footer .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;}
        .footer .footer-fixed button{display: block;-webkit-appearance: none;background-color: #ffc10c;
            width: 100%;height: 50px;border: none;outline: none;color: #fff;word-spacing: 5px;font-weight: bold;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">添加项目</div>
        </div>
    </header>
    <div class="content">
        <ul>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">服务</span>
                </div>
                <div class="right choose">
                    <select>
                        <option>模特</option>
                        <option>丽人</option>
                        <option>摄影</option>
                        <option>设计</option>
                        <option>生活服务</option>
                        <option>语言练习</option>
                        <option>专业咨询</option>
                        <option>影视表演</option>
                    </select>
                    <span>请选择<i class="iconfont icon-arrow_right"></i></span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">性别</span>
                </div>
                <div class="right">
                    <div class="sex">
                        <span class="man">男</span>
                        <span class="women">女</span>
                        <span class="any">不限</span>
                    </div>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">开始时间</span>
                </div>
                <div class="right time">
                    <input type="datetime-local"/>
                    <span>请选择<i class="iconfont icon-arrow_right"></i></span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">价格</span>
                </div>
                <div class="right price">
                    <label>
                        <input type="number" placeholder="请输入数字" maxlength="5"/>
                    </label>
                    <span>元/小时</span>
                </div>
            </li>

            <li class="bottom-line">
                <div class="left">
                    <span class="name">地区</span>
                </div>
                <div class="right">
                    <label class="area">
                        <select id="s_province" class="prov">
                            <option value="0">选择省份</option>
                        </select>
                        <select id="s_city" class="city">
                            <option value="0">选择城市</option>
                        </select>
                        <select id="s_county" class="district">
                            <option value="0">选择地区</option>
                        </select>
                    </label>
                </div>
            </li>
        </ul>
    </div>
    <footer class="footer">
        <div class="footer-fixed">
            <button type="submit">保存</button>
        </div>
    </footer>
</body>
<script>
    _init_area();
    $('.sex span').click(function(){
        $(this).css('background-color','#FFC10C').siblings().css('background-color','');
    })
</script>
</html>